
<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>学生管理</title>
    <div th:replace="include/bootstrap :: bootstrap"></div>
    <style>
        .panel {
            margin-bottom: 20px;
            background-color: #fff;
            border: 1px solid transparent;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
        }
        
        .table-responsive {
            border: none;
        }
        
        .table {
            margin-bottom: 0;
        }
        
        .panel-heading {
            padding: 15px 20px;
            border-bottom: 1px solid #eee;
            background-color: #f8f9fa;
            border-top-left-radius: 7px;
            border-top-right-radius: 7px;
        }
        
        .panel-title {
            margin-top: 0;
            margin-bottom: 0;
            font-size: 18px;
            font-weight: 600;
            color: #2c3e50;
        }
        
        .panel-body {
            padding: 20px;
        }
        
        .btn-primary {
            background-color: #3498db;
            border-color: #3498db;
        }
        
        .btn-primary:hover {
            background-color: #2980b9;
            border-color: #2980b9;
        }
        
        .btn-danger {
            background-color: #e74c3c;
            border-color: #e74c3c;
        }
        
        .btn-danger:hover {
            background-color: #c0392b;
            border-color: #c0392b;
        }
        
        .btn-warning {
            background-color: #f39c12;
            border-color: #f39c12;
        }
        
        .btn-warning:hover {
            background-color: #d35400;
            border-color: #d35400;
        }
        
        .pagination > .active > a {
            background-color: #3498db;
            border-color: #3498db;
        }
        
        .pagination > .active > a:hover {
            background-color: #2980b9;
            border-color: #2980b9;
        }
    </style>
</head>
<body>
<div th:replace="include/TeacherNav :: TeacherNav"></div>

<div class="main-content">
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-12">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h3 class="panel-title">学生管理</h3>
                    </div>
                    <div class="panel-body">
                        <div class="row">
                            <div class="col-md-8">
                                <button class="btn btn-primary btn-sm" type="button" onclick="add()">
                                    <i class="glyphicon glyphicon-plus"></i> 添加学生
                                </button>
                                <button class="btn btn-danger btn-sm" id="getAllSelectedId">
                                    <i class="glyphicon glyphicon-trash"></i> 批量删除
                                </button>
                                <button class="btn btn-warning btn-sm" id="deleteAll" onclick="deleteAll()">
                                    <i class="glyphicon glyphicon-remove-circle"></i> 删除所有数据
                                </button>
                            </div>
                            <div class="col-md-4 text-right">
                                <strong>我的班级：</strong> <span th:text="${pj != null ? pj.classname : '未分配班级'}"></span>
                            </div>
                        </div>
                        
                        <div class="table-responsive" style="margin-top: 15px">
                            <table class="table table-striped table-bordered table-hover">
                                <thead>
                                    <tr>
                                        <th width="5%">
                                            <input type="checkbox" id="allAndNotAll" /> 全选
                                        </th>
                                        <th width="10%">编号</th>
                                        <th width="20%">学号</th>
                                        <th width="20%">密码</th>
                                        <th width="20%">姓名</th>
                                        <th width="25%">操作</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr th:if="${pageInfo.content.isEmpty()}">
                                        <td colspan="6" class="text-center">暂无数据</td>
                                    </tr>
                                    <tr th:each="stulist: ${pageInfo.content}">
                                        <td><input type="checkbox" name="items" th:id="${stulist.userid}"/></td>
                                        <td th:text="${stulist.userid}"></td>
                                        <td th:text="${stulist.username}"></td>
                                        <td th:text="${stulist.userpwd}"></td>
                                        <td th:text="${stulist.truename}"></td>
                                        <td>
                                            <a th:onclick="'javascript:edit(\''+${stulist.userid}+'\');'" class="btn btn-success btn-xs">
                                                <i class="glyphicon glyphicon-pencil"></i> 修改
                                            </a>
                                            <a th:href="@{'./DeleteStu?userid='+${stulist.userid}}" class="btn btn-danger btn-xs"
                                               onclick="return confirm('确定要删除此学生吗?');">
                                                <i class="glyphicon glyphicon-trash"></i> 删除
                                            </a>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                        
                        <!-- 分页信息 -->
                        <div class="row" style="margin-top: 15px;">
                            <div class="col-md-6">
                                当前 <span th:text="${pageInfo.number + 1}"></span> 页，
                                共 <span th:text="${pageInfo.totalPages}"></span> 页，
                                共 <span th:text="${pageInfo.totalElements}"></span> 条记录
                            </div>
                            <div class="col-md-6">
                                <nav aria-label="Page navigation">
                                    <ul class="pagination">
                                        <li th:class="${pageInfo.first ? 'disabled' : ''}">
                                            <a th:href="@{/StudentList}" aria-label="首页">
                                                <span aria-hidden="true">首页</span>
                                            </a>
                                        </li>
                                        <li th:class="${pageInfo.hasPrevious() ? '' : 'disabled'}">
                                            <a th:href="@{/StudentList(pageNum = ${pageInfo.number})}" aria-label="上一页">
                                                <span aria-hidden="true">上一页</span>
                                            </a>
                                        </li>
                                        <li th:class="${pageInfo.hasNext() ? '' : 'disabled'}">
                                            <a th:href="@{/StudentList(pageNum = ${pageInfo.number + 2})}" aria-label="下一页">
                                                <span aria-hidden="true">下一页</span>
                                            </a>
                                        </li>
                                        <li th:class="${pageInfo.last ? 'disabled' : ''}">
                                            <a th:href="@{/StudentList(pageNum = ${pageInfo.totalPages})}" aria-label="末页">
                                                <span aria-hidden="true">末页</span>
                                            </a>
                                        </li>
                                    </ul>
                                </nav>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 添加学生模态框 -->
<div class="modal fade" id="addch" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
     aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="my" style="text-align:center">添加学生</h4>
            </div>
            <form class="form-horizontal" th:action="@{/addStu}" method="post">
                <div class="modal-body">
                    <div class="form-group">
                        <label class="col-sm-2 control-label">学号</label>
                        <div class="col-sm-10">
                        <input type="text" name="username" class="form-control" id="username"
                        placeholder="请输入学号" required>
                        <span class="help-block"></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">姓名</label>
                        <div class="col-sm-10">
                        <input type="text" name="truename" class="form-control" id="truename"
                        placeholder="请输入姓名" required>
                        <span class="help-block"></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">密码</label>
                        <div class="col-sm-10">
                        <input type="text" name="userpwd" class="form-control" id="userpwd"
                        placeholder="请输入密码" required>
                        <span class="help-block"></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">班级</label>
                        <div class="col-sm-5">
                        <select name="classid" class="form-control" required>
                        <option value="">-- 请选择班级 --</option>
                        <option th:each="pjclass : ${list}" th:value="${pjclass.classid}" th:text="${pjclass.classname}"></option>
                        </select>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="submit" class="btn btn-primary" id="addbut">提交</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- 编辑模态框 -->
<div class="modal fade" id="studit" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                        aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="Label">编辑学生信息</h4>
            </div>
            <form class="form-horizontal" th:action="@{/updateStu}" method="post">
                <div class="modal-body">
                    <input name="userid" id="userid1" hidden="hidden"/>
                    <input name="roleid" id="roleid1" hidden="hidden"/>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">学号</label>
                        <div class="col-sm-10">
                            <input type="text" name="username" class="form-control" id="username1" required/>
                            <span class="help-block"></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">姓名</label>
                        <div class="col-sm-10">
                            <input type="text" name="truename" class="form-control" id="truename1"
                            placeholder="" required>
                            <span class="help-block"></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">密码</label>
                        <div class="col-sm-10">
                            <input type="text" name="userpwd" class="form-control" id="userpwd1"
                            placeholder="" required>
                            <span class="help-block"></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">班级</label>
                        <div class="col-sm-5">
                            <select class="form-control" id="classid1" name="classid" required>
                                <option value="">-- 请选择班级 --</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="submit" class="btn btn-primary" id="tch_save_btn">保存</button>
                </div>
            </form>
        </div>
    </div>
</div>

<script type="text/javascript">
    $(function(){
        //实现全选与反选
        $("#allAndNotAll").click(function() {
            if (this.checked){
                $("input[name='items']:checkbox").each(function(){
                    $(this).prop("checked", true);
                });
            } else {
                $("input[name='items']:checkbox").each(function() {
                    $(this).prop("checked", false);
                });
            }
        });
        
        //获取被选中的id
        $('#getAllSelectedId').click(function(){
            var ids = new Array();
            $("input[name='items']:checked").each(function(){
                ids.push($(this).attr("id"));
            });
            
            if(ids.length == 0){
                alert("请选择要删除的数据！");
            } else {
                if(confirm('确定要删除选中的学生吗?')){
                    location.href = "deleteManyStu?ids="+ids;
                }
            }
        });
    });
    
    function deleteAll() {
        if(confirm('确定要删除所有学生数据吗?')){
            window.location = "/deleteAll";
        }
    }

    // 添加学生
    function add() {
        $("#addch").modal({
            backdrop: "static"
        });
    }

    // 编辑学生
    function edit(userid) {
        $.ajax({
            url: '/findAllClass',
            type: 'POST',
            success: function (data) {
                // 清空下拉框
                $("#classid1").empty();
                $("#classid1").append("<option value=''>-- 请选择班级 --</option>");
                
                for (var i = 0; i < data.length; i++) {
                    $("#classid1").append("<option value='" + data[i].classid + "'>" + data[i].classname + "</option>");
                }
            },
            error: function() {
                alert("获取班级列表失败");
            }
        });
        
        if (!userid) {
            alert("错误：未获取到学生ID");
        } else {
            // 查询学生数据
            $.ajax({
                url: '/StuEdit',
                type: 'POST',
                dataType: 'json',
                contentType: 'application/json;charset=UTF-8',
                data: JSON.stringify({
                   userid: userid
                }),
                success: function (data) {
                    if (data) {
                        $("#userid1").val(data.userid);
                        $("#roleid1").val(data.roleid);
                        $("#username1").val(data.username);
                        $("#truename1").val(data.truename);
                        $("#userpwd1").val(data.userpwd);
                        $("#classid1").val(data.classid);
                        $("#studit").modal('show');
                    } else {
                        alert("未找到该学生信息");
                    }
                },
                error: function () {
                    alert("获取学生数据失败");
                }
            });
        }
    }
</script>
</body>
</html>